<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="css/moon.css">
    <!-- <link rel="stylesheet" href="css/iconfont.css"> -->
    <link rel="stylesheet" href="css/onload.css">
</head>

<body>
    <div class="preload">
        <img class="airplane" src="./images/飞机.png" alt="">
        <h3>终点站:山谷露营</h3>
        <img class="cloud1" src="./images/cloud.png" alt="cloud1">
        <img class="cloud2" src="./images/cloud.png" alt="cloud2">
        <img class="cloud3" src="./images/cloud.png" alt="cloud3">
    </div>
    <header>
        <a href="#sec" class="logo">Shall&nbsp;We&nbsp;<span style="color: pink;font-size: 1.6em;">
                Love?</span></a>
        <ul>
            <li><a href="index.html" class="active">主页</a></li>
            
        </ul>
    </header>
    <section>
        <img src="./images/stars.png" id="stars">
        <img src="./images/moon.png" id="moon">
        <img src="./images/mountains_behind.png" id="mountains_behind">
        <!-- <h2 id="text">Moon Light</h2> -->
        <!-- <a href="#" id="btn">Explore</a> -->
        <!-- <div class="heart" id="heart" style="display: none;">

        </div> -->
        <img src="./images//mountains_front.png" id="mountains_front">
        <!-- 烟花 -->
        <div class="firework">

            <div class="bomb-rocket"></div>
            <div class="bomb-rocket"></div>
            <div class="bomb-rocket"></div>
            <div class="bomb-rocket"></div>
            <div class="bomb-rocket"></div>
            <div class="bomb-rocket"></div>
            <div class="bomb-rocket"></div>
            <div class="bomb-rocket"></div>
            <div class="bomb-rocket"></div>
            <div class="bomb-rocket"></div>
            <div class="bomb-rocket"></div>
            <div class="bomb-rocket"></div>
            <div class="normal-rocket"></div>
            <div class="normal-rocket"></div>
            <div class="normal-rocket"></div>
            <div class="normal-rocket"></div>
            <div class="normal-rocket"></div>
            <div class="normal-rocket"></div>
            <div class="normal-rocket"></div>
            <div class="normal-rocket"></div>
            <div class="normal-rocket"></div>

            <div class="normal-rocket"></div>
            <div class="normal-rocket"></div>
            <div class="normal-rocket"></div>
            <div class="normal-rocket"></div>
            <div class="normal-rocket"></div>
            <div class="normal-rocket"></div>
        </div>
        <!-- 篝火 -->
        <div class="campfire">
            <div class="sparks">
                <div class="spark"></div>
                <div class="spark"></div>
                <div class="spark"></div>
                <div class="spark"></div>
                <div class="spark"></div>
                <div class="spark"></div>
                <div class="spark"></div>
                <div class="spark"></div>
            </div>
            <div class="logs">
                <div class="log">
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                </div>
                <div class="log">
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                </div>
                <div class="log">
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                </div>
                <div class="log">
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                </div>
                <div class="log">
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                </div>
                <div class="log">
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                </div>
                <div class="log">
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                    <div class="streak"></div>
                </div>
            </div>
            <div class="sticks">
                <div class="stick"></div>
                <div class="stick"></div>
                <div class="stick"></div>
                <div class="stick"></div>
            </div>
            <div class="fire">
                <div class="fire__red">
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                </div>
                <div class="fire__orange">
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                </div>
                <div class="fire__yellow">
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                </div>
                <div class="fire__white">
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                    <div class="flame"></div>
                </div>
            </div>
        </div>

        <!-- 营地   -->


        <div class="glowflies">
            <div class="glowfly"></div>
            <div class="glowfly"></div>
            <div class="glowfly"></div>
            <div class="glowfly"></div>
            <div class="glowfly"></div>
            <div class="glowfly"></div>
            <div class="glowfly"></div>
            <div class="glowfly"></div>
        </div>
        <div class="tent">
            <div class="upper"></div>
            <div class="bottom"></div>
            <div class="shadow"></div>
            <div class="line"></div>
            <div class="door"></div>
            <div class="door-part"></div>
            <div class="door-part two"></div>
        </div>
        <div class="floor"></div>

        <!-- 这是文字 -->
        <div class="textwenzi">
            <h1 id="wenzi">
                <span>如</span>
                <span>果</span>
                <span>说</span>
                <span>伸</span>
                <span>手</span>
                <span>要</span>
                <span>来</span>
                <span>的</span>
                <span>月</span>
                <span>亮</span>
                <span>无</span>
                <span>意</span>
                <span>义</span>
            </h1>
            <h1 id="wenzi1">
                <span>那</span>
                <span>我</span>
                <span>现</span>
                <span>在</span>
                <span>就</span>
                <span>月</span>
                <span>亮</span>
                <span>下</span>

            </h1>
            <h1 id="wenzi2">
                <span>把</span>
                <span>我</span>
                <span>的</span>
                <span>真</span>
                <span>心</span>
                <span>刻</span>
                <span>在</span>
                <span>山</span>
                <span>崖</span>
                <span>上</span>
            </h1>
            <h1 id="wenzi3">
                <span>往</span>
                <span>下</span>
                <span>滑</span>
                <span>动</span>
                <span>可</span>
                <span>以</span>
                <span>看</span>
                <span>到</span>
                <span>更</span>
                <span>多</span>
                <span>内</span>
                <span>容</span>
            </h1>
        </div>
    </section>


    <!-- 第二梯度的内容 -->
    <div class="sec" id="sec">
        <h2>我想说</h2>
        <div class="tab">
            <ul>
                <li class="actives">为什么喜欢</li>
                <li>与你的时间轴</li>
                <li>关于我</li>
                <li>表白过后</li>
            </ul>
        </div>

        <div class="content">
            <div class="con1" style="display: block;">
                <!-- 内容 -->
                <div id="why">
                    <h2>为什么喜欢</h2>
                    <div class="say" style="background: #fff;">
                        <p style="color: #777;padding: 30px 20px;text-indent: 2em;">
                            外观好模型好,然后我自作多情的回想并总结你之前的微信的个性签名和朋友圈(如果是我自作多情让你觉得不舒服我很抱歉),我觉得你是一个好人,当然好人最重要是讲你人不错,自作多情认为你够坚持,人品应该也不错
                        </p>
                    </div>
                </div>
            </div>
            <!-- 这是一个时间轴 -->
            <div class="con2">
                <!-- 轴 -->
                <div id="progress-bar-container">

                    <ul>
                        <li class="step step01">
                            <div class="step-inner">10月某天</div>
                        </li>
                        <li class="step step02">
                            <div class="step-inner">10-11月</div>
                        </li>
                        <li class="step step03">
                            <div class="step-inner">加微信前</div>
                        </li>
                        <li class="step step04">
                            <div class="step-inner">加到微信</div>
                        </li>
                        <li class="step step05">
                            <div class="step-inner">加微信后</div>
                        </li>
                        <li class="step step06">
                            <div class="step-inner">圣诞节</div>
                        </li>
                        <li class="step step07">
                            <div class="step-inner">元旦节</div>
                        </li>
                        <li class="step step08">
                            <div class="step-inner">中秋节前</div>
                        </li>
                        <li class="step step09">
                            <div class="step-inner">中秋节</div>
                        </li>
                        <li class="step step10">
                            <div class="step-inner">今天</div>
                        </li>


                    </ul>

                    <div id="line">
                        <div id="line-progress"></div>
                    </div>
                </div>
                <!-- 内容 -->
                <div id="progress-content-section">
                    <div class="section-content  create active">
                        <h2>19年10月的某天</h2>
                        <p>2019年10月应该是星期二的晚上，我从教室会宿舍,低头路过星光大道,发现正下方有长裙和一双我不知如何描述的鞋子。噢有人要过来,抬头避让,第一次看到你,觉得你长得五官挺立体,但也高冷,但路过后我还是回头看了你一眼,长发,背景真不错
                        </p>
                    </div>

                    <div class="section-content two">
                        <h2>19年10-12月</h2>
                        <p>偶尔会在路上碰到你,一日三餐旁边的楼梯,球场边的路,星光大道。。。。。。
                        </p>
                    </div>
                    <div class="section-content three">
                        <h2>加微信前</h2>
                        <p>发现你原来每个星期二晚上会上第二节课,刚好我下第一节课。虽然我挺害羞的,可还是会偷偷看向你,希望有一天你也能看回我(虽然我很丑55555),不仅如此我发现每个星期都有几天还是能够看到你，看到你精致的五官,可是那时候想为什么你会化妆。日复一日我幻想着能够天天看到你，我也开始敢偶尔的盯你一下(我觉得那时挺变态的哈哈),过了好一会，然后幻想着怎么拿你的联系方式
                        </p>
                    </div>
                    <div class="section-content four">
                        <h2>加微信</h2>
                        <p>好像是圣诞节的前两三个星期吧,我和我同学在阳光看番薯,然后向右一转发现你在挑东西,卧槽,尴尬,立马暗示我同学离开这里(我真的害羞,之前更害羞哈哈哈),离开后,又悔恨刚刚大好机会居然浪费了55。然后你和你的同学回去了,然后心想,如果你是一个人我可能就跟上去加了,好吧,不管了星期二我必加,不管有没有人,很庆幸星期二那天你落单了,所以加到了。
                        </p>
                    </div>

                    <div class="section-content five">
                        <h2>加微信后</h2>
                        <p>星期二等到你九点十个字,第一天信息转载于我同学的长篇阔论。我们就开始偶尔吹下牛,然后讲到英语四级,你突然不回复我信息,没有办法，出去散散心,可能对我没什么吧。。。然后到了周末我去拿个快递,抬头发现你居然在门口准备进来,我下意识低下了头心想这走廊怎么怎么窄。好家伙,那晚你居然问我考的怎么样(现在过了),还有晚安,好吧这是大学第一次收到异性的晚安,你叫我圣诞节和你去拍照。我开心到批爆!后面我们聊得还可以,你有讲你的感情史,我抱歉我那个时候我不是很上心对于你所说的。不过我还是有尽力去安慰你,然后后面就凉凉了,那一次快递,其实我很想去拿,我挺想见到你,可是我真的害羞而且有点自卑,所以我各种推脱。酸奶捞我也没有给你买,然后我在你楼下给快递你,你直接拿了就走额,然后后面的信息。。。
                        </p>
                    </div>

                    <div class="section-content six">
                        <h2>圣诞节</h2>
                        <p>好吧,可能是我想太多是我太害羞自卑,也可能你见到我之后就对我没意思了,那我总得答应我的诺言吧,就问你圣诞节还要不要我去,你说不用。那好,星期三有跟你发信息,还是觉得有点敷衍,隔这么久才回复我,那好吧,静观其变
                        </p>
                    </div>

                    <div class="section-content seven">
                        <h2>元旦节</h2>
                        <p>这一次,如果情况还是一样,我就不找了,好家伙,意料之中。那时候有点无奈,第二天心想我还没有经历过这种情况,就把之前的信息删掉了,就多一个微信好友吧</p>
                    </div>
                    <div class="section-content eight">
                        <h2>20年中秋前</h2>
                        <p>20年中秋之前,有点意外,年初我收到你的信息,这次我没以前那么憧憬了,所以回复的也没那么热情了,好,又不理我。就这样吧,然后我没有在想了,过年后的某天我点击的你微信,个性签名我不高冷?可能有别人对你有意思,你说你不高冷吧。然后就没什么了,直到有一天我们班要做一个期中网页设计项目,我们组做一个旗袍汉服中山装商店,然后我们的剪辑剪了组员女装的视频,我也把视频发到朋友圈,出乎意料,你居然点赞了,然后就点进了你朋友圈,一看好家伙,这么巧合,那条朋友圈你刚好说喜欢旗袍,也带着白色有线耳机,而巧在视频中的我也是旗袍+白色耳机,第二天我在点进你发现你的个性签名是好开心之类的?然后回想起你过年后的朋友圈内容和小女孩的个性签名,于是我自作多情的发现有点意思
                        </p>
                    </div>
                    <div class="section-content nine">
                        <h2>中秋节</h2>
                        <p>好吧,自你那次点赞后。心中的那啥有开始让我胡思乱想了。我开始特地留意你的朋友圈,开学后,我还一如既往的害怕。但还是关注着你的动态,中秋节发简单的小程序给你,祝你中秋快乐,试探着我们是否能够回到刚加你微信的时候。好吧,好像不行。然后你也不发朋友圈了,而我有时候却像中了毒样。。。后面你生日跟你聊了下,又是我结尾。撩妹怎么这么难是我太差了吧,于是我想弹一首Eason的四季,表达一下我的情绪,把四季这首歌的晚上回想起了以前的春夏秋冬,18年秋天来到了东软还好还好经常听四季这首歌。第二年的冬天遇到了你加了微信,以为这会是新开始,只是以为。。。
                        </p>
                    </div>
                    <div class="section-content ten">
                        <h2>今天</h2>
                        <p>今天是春天,花再开了,就想我对你的感情一样,自那个点赞和我的自作多情后就一直藏在心里,却不敢直接讲,而今年春天我想直接了决讲个明白----------------
                            我喜欢你,我真的喜欢你。可以让我试着追你么?</p>
                    </div>
                </div>
            </div>
            <!-- 这是一个简历 -->
            <div class="con3">
                <div class="resume">
                    <div class="left">
                        <div class="img_holder">
                            <img src="./images/panda.png" alt="picture">
                        </div>
                        <div class="contact_wrap pb">
                            <div class="title">
                                联系方式
                            </div>
                            <div class="contact">
                                <ul>
                                    <li>
                                        <div class="li_wrap">
                                            <div class="icon"><i class="fas fa-mobile-alt" aria-hidden="true"></i></div>
                                            <div class="text">号码: 86- 10086 10016</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="li_wrap">
                                            <div class="icon"><i class="fas fa-envelope" aria-hidden="true"></i></div>
                                            <div class="text">邮箱: 88888888@qq.com</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="li_wrap">
                                            <div class="icon"><i class="fas fa-text-height" aria-hidden="true"></i>
                                            </div>
                                            <div class="text">身高: 162CM</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="li_wrap">
                                            <div class="icon"><i class="fas fa-weight" aria-hidden="true"></i></div>
                                            <div class="text">体重: 常年徘徊在52kg-55kg</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="skills_wrap pb">
                            <div class="title" style="font-size: 20px;">
                                稍微拿的出手技能
                            </div>
                            <div class="skills">
                                <ul>
                                    <li>
                                        <div class="li_wrap">
                                            <div class="icon"><i class="fab fa-html5"></i></div>
                                            <div class="text">HTML</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="li_wrap">
                                            <div class="icon"><i class="fab fa-css3-alt"></i></div>
                                            <div class="text">CSS</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="li_wrap">
                                            <div class="icon"><i class="fab fa-js"></i></div>
                                            <div class="text">Javascript</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="li_wrap">
                                            <div class="icon"><i class="fab fa-python"></i></div>
                                            <div class="text">Python</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="hobbies_wrap pb">
                            <div class="title">
                                爱好
                            </div>
                            <div class="hobbies">
                                <ul>
                                    <li>
                                        <div class="li_wrap">
                                            <div class="icon"><i class="fas fa-basketball-ball"></i></div>
                                            <div class="text">篮球</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="li_wrap">
                                            <div class="icon"><i class="fas fa-music"></i></div>
                                            <div class="text">听音乐</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="li_wrap">
                                            <div class="icon"><i class="fas fa-gamepad"></i></div>
                                            <div class="text">打机</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="li_wrap">
                                            <div class="icon"><i class="fas fa-futbol"></i></div>
                                            <div class="text">足球</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="header">
                            <div class="name_role">
                                <div class="name">
                                    陈安鹏
                                </div>
                                <div class="role">
                                    一个学生
                                </div>
                            </div>
                            <div class="about">
                                我叫陈安鹏, 来自广东阳江。 性别男,爱好你, 喜欢唱跳,Rap,篮球。我是一个开朗乐观,佛系闷骚(较多朋友评价)的普通男仔。

                            </div>
                        </div>
                        <div class="right_inner">
                            <div class="exp">
                                <div class="title">
                                    我本人
                                </div>
                                <div class="exp_wrap">
                                    <ul>
                                        <li>
                                            <div class="li_wrap">
                                                <!-- <div class="date">
                                                    2017-2018 
                                                </div> -->
                                                <div class="info">
                                                    <p class="info_title">
                                                        我叫陈安鹏
                                                    </p>
                                                    <p class="info_com">
                                                        今年20岁
                                                    </p>
                                                    <p class="info_cont">
                                                        现在大三快大四,单身了三年多,也想谈个恋爱了。但苦于硬件弱模型差,又比较笨拙比较佛,加上大学以来皮肤每况愈下(医生说我熬夜伤肝会湿气出油长痘),所以就单身成狗
                                                    </p>
                                                </div>
                                            </div>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                            <div class="exp">
                                <div class="title">
                                    恋爱经历
                                </div>
                                <div class="exp_wrap">
                                    <ul>
                                        <li>
                                            <div class="li_wrap">
                                                <!-- <div class="date">
                                                    2017-2018 
                                                </div> -->
                                                <div class="info">
                                                    <p class="info_title">
                                                        1 次
                                                    </p>
                                                    <p class="info_com">
                                                        2016年11月--2018年3月
                                                    </p>
                                                    <p class="info_cont">
                                                        分手原因有点难阐述,总结就是不期而遇到渐行渐远,过程和结局有点像大话西游吧(我觉得哈哈哈),你想听我也可以讲。
                                                    </p>
                                                </div>
                                            </div>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                            <div class="exp">
                                <div class="title">
                                    个人生活
                                </div>
                                <div class="exp_wrap">
                                    <ul>
                                        <li>
                                            <div class="li_wrap">
                                                <!-- <div class="date">
                                                    2017-2018 
                                                </div> -->
                                                <div class="info">
                                                    <p class="info_title">
                                                        绝大数时候都是平平淡淡
                                                    </p>
                                                    <p class="info_com">
                                                        365天中有345天吧
                                                    </p>
                                                    <p class="info_cont">
                                                        平时就打打机,打打球(现在不怎么打了),弹弹吉他,看看视频。一年加起来有几天会空虚寂寞、伤心烦躁之类坏情绪,但大多数时候都是很乐观的
                                                    </p>
                                                </div>
                                            </div>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                            <div class="exp">
                                <div class="title">
                                    补充:
                                </div>
                                <div class="exp_wrap">
                                    <ul>
                                        <li>
                                            <div class="li_wrap">
                                                <!-- <div class="date">
                                                    2017-2018 
                                                </div> -->
                                                <div class="info">
                                                    <p class="info_title">
                                                        反正是补充就随便说点吧
                                                    </p>
                                                    <p class="info_com">
                                                        随便说点
                                                    </p>
                                                    <p class="info_cont">
                                                        很抱歉你之前讲感情的时候我不是很认真，也没有到做到治愈。我很少会和别人谈起她,但大多数人总会问她多高(应该我长得矮吧555555),
                                                        她和我一样是162CM(高考体检测),她以前对我很好
                                                    </p>
                                                </div>
                                            </div>
                                        </li>

                                    </ul>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="con4">
                <div id="why">
                    <h2>表白以后</h2>
                    <div class="say" style="background: #fff;text-indent: 2em;">
                        <p style="color: #777;padding: 30px 20px;">
                            如果拒绝,真的没关系,我会安静的离去,强扭的瓜不会甜,我也不渴。不过我有个同学想认识你一下,我之前给他看了一张你的照片他觉得好看,如果我失败了,他想加你微信,而我。。。如果答应我就好咯,我做事要么不做要么不上心,但如果很想做的事,我一定会尽力做好,反正我喜欢你,可以我让泡你么?
                        </p>
                    </div>
                </div>
            </div>
        </div>









        <div class="end">
            <p class="heartend"><span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
            </p>
        </div>

        <div class="end">
            <p class="heartend"><span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
            </p>
        </div>

        <div class="end">
            <p class="heartend"><span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
                <span class="icon"><i class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i
                        class="fab fa-gratipay"></i></span><span class="icon"><i class="fab fa-gratipay"></i></span>
            </p>
        </div>


    </div>

    <script>

    </script>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
    <script src="./js/moon.js"></script>
  
    <script src="./js/onload.js"></script>
</body>

</html>